<template>
  <n-card :bordered="false" class="home-content-card" id="home-content">
    <div style="padding-top: 180px;">
      <desktop-view/>
      <application-view/>
    </div>
  </n-card>
</template>

<script lang="ts">
import {defineComponent, ref, reactive, toRefs, watch, h, inject, provide, onMounted, onBeforeMount} from 'vue'
import CommonFooter from '@/components/common/footer/index.vue'

import DesktopView from '@/views/desktop/index.vue'
import ApplicationView from '@/views/application/index.vue'
import { useStore } from "vuex"

export default defineComponent({
  components: {
    DesktopView, ApplicationView

  },
  setup() {
    const store = useStore()
      const state = reactive({

      })
    const methods = {
      changeBackground(val:string='rgb(233,236,239)', isImg:boolean=false) { //val 值 isImg 是否为图片
        const el = <HTMLElement>document.getElementById('home-content')
        if (val || isImg || val.indexOf('http') !== -1 || val.indexOf('https') !== -1) {
          el.style.setProperty('background-image', `url('${val}')`)
        } else {
          // el.style.setProperty('background-color', val)
          el.style.removeProperty('background-image')
        }

      },
    }

    provide("changeBackground", methods.changeBackground)

    onMounted(()=>{
      //在页面加载时读取sessionStorage里的状态信息
      if (sessionStorage.getItem('store')) {
        store.replaceState(Object.assign({}, store.state, JSON.parse(String(sessionStorage.getItem('store')))));
      }

      //在页面刷新时将vuex里的信息保存到sessionStorage里
      window.addEventListener('beforeunload', () => {
        sessionStorage.setItem('store', JSON.stringify(store.state));
      });
      if (store.state.backgroundImage) {
        methods.changeBackground(store.state.backgroundImage)
      }
      
    })
    return {
      ...toRefs(state),
      ...methods,
      store
    }
  },
})

</script>

<style scoped>

.home-content-card{
  width:100%;
  height: 100vh;
  background-repeat: no-repeat; /*图片不重复*/
  background-attachment: fixed; /*图片不跟随屏幕滚动*/
  background-size: cover;
}
</style>
